<template>
  <div class="comment-section">
    <div class="comment-header">
      <span class="comment-count">共{{comments.length}}条评论</span>
      <van-button type="primary" round size="small" @click="showComments = true">
        查看全部评价
      </van-button>
    </div>
    <van-popup v-model:show="showComments" position="bottom" round>
      <div class="comment-list">
        <!-- 这里循环展示评论内容 -->
        <div v-for="(comment, index) in comments" :key="index" class="comment-item">
          <div class="comment-user">
            <van-image :src="comment.imageUrl" round width="40" height="40"/>
            <span class="comment-username">{{ comment.username }}</span>
            <span class="comment-time">{{ comment.comment.createTime }}</span>
          </div>
          <div class="comment-content">{{ comment.comment.content }}</div>
        </div>
      </div>
      <van-button type="default" round size="small" @click="showComments = false" class="close-button">
        关闭
      </van-button>
    </van-popup>
  </div>



</template>

<script setup>
import {onMounted, ref} from 'vue';
// 引入Vant组件
import {Popup, Image, Button, showToast} from 'vant';
import {get} from "../util/request.js";
import {useStore} from "../pinia/index.js";

const store = useStore()
const courseInfo = ref({})




onMounted(() => {
  courseInfo.value = store.currentCourse;
  fetch();
})

const fetch = () => {

  console.log(courseInfo.value.courseId)
  get(`course/getCourseComment/${courseInfo.value.courseId}`, ).then(res => {
    if (res.code == 0) {
      comments.value = res.data;

    } else {
      showToast("获取评论失败")
    }
  })

}

const showComments = ref(false);
const comments = ref([
  {
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    username: 'Patisseris Land',
    time: '2020-08-23',
    content: '画快题好上瘾啊，画完还想画。都是什么神仙老师，讲得也太好了叭！而且还超帅~',
  },
  // 添加更多评论
]);
</script>

<style scoped>
.comment-section {
  margin-bottom: 20px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.comment-count {
  font-size: 16px;
  font-weight: bold;
}

.comment-list {
  padding: 10px;
}

.comment-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.comment-user {
  display: flex;
  align-items: center;
}

.comment-username {
  margin-left: 10px;
  font-weight: bold;
}

.comment-time {
  margin-left: 10px;
  color: #999;
  font-size: 12px;
}

.comment-content {
  margin-top: 5px;
  line-height: 1.5;
}
</style>